<%@page contentType="text/html" pageEncoding="UTF-8" %>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

<h3>${title}</h3>

<div class="preview_page">
    <c:forEach var="question" items="${questions}">
        <!-- Get the indent level for each questions -->
        <c:set var="indentLevel" value="${fn:substring(fn:length(question.sequence) / 2, 0, 1) + 1}"/>

        <dl class="line${indentLevel}">
            <dt>${question.sequence} ${question.text}</dt>

            <!-- If the response type is system reserved. -->
            <!-- Begin: System Reserved Response -->
            <c:if test="${question.responseType == 'Yes/No'}">
                <dd>
                    <input name="" type="radio" value=""/>
                    Yes
                </dd>
                <dd>
                    <input name="" type="radio" value=""/>
                    No
                </dd>
            </c:if>

            <c:if test="${question.responseType == 'No/Yes'}">
                <dd>
                    <input name="" type="radio" value=""/>
                    No
                </dd>
                <dd>
                    <input name="" type="radio" value=""/>
                    Yes
                </dd>
            </c:if>

            <c:if test="${question.responseType == 'US States'}">
                <select>
                    <c:forEach var="response" items="${question.responses}">
                        <option>${response.label}</option>
                    </c:forEach>
                </select>
            </c:if>

            <c:set var="rt" value="${question.responseType}"/>
            <c:if test="${rt == 'Social Security Number' or rt == 'Phone Number' or rt == 'Email Address'}">
                ${question.responses[0].label}:
                <input type="text"/>
            </c:if>
            <!-- End: System Reserved Response Type -->

            <!-- If the response type is custom, the responseType of the question is empty. -->
            <c:if test="${question.uiType != 'Dropdown'}">
                <c:forEach var="response" items="${question.responses}">
                    <dd>
                        <c:if test="${question.uiType == 'Radio Button'}">
                            <input name="" type="radio" value=""/>
                            ${response.label}
                            <br/>
                        </c:if>

                        <c:if test="${question.uiType == 'Check Box'}">
                            <input name="" type="checkbox" value=""/>
                            ${response.label}
                            <br/>
                        </c:if>
                    </dd>
                </c:forEach>

                <dd>
                    <c:if test="${question.uiType == 'Text Box' && rt != 'Display'}">
                        <input type="text" value=""/>
                    </c:if>

                    <c:if test="${question.uiType == 'Text Area'}">
                        <textarea></textarea>
                    </c:if>
                </dd>
            </c:if>

            <c:if test="${question.uiType == 'Dropdown'}">
                <select>
                    <c:forEach var="response" items="${question.responses}">
                        <option>
                                ${response.label}
                        </option>
                    </c:forEach>
                </select>
            </c:if>

            <c:if test="${rt == 'Display'}">
                <input type="text" style="width:${question.width}px" disabled="" />
            </c:if>
        </dl>
    </c:forEach>
</div>
<!--END: popup -->